import React from 'react'

import Highcharts from 'highcharts'
import HighchartsMore from 'highcharts/highcharts-more'

HighchartsMore(Highcharts)

class SingleChart extends React.PureComponent {
  componentDidMount() {
    const chartOptions = {
      chart: {
        animation: false,
        zoomType: 'xy',
        height: 300,
        events: {
          click: this.props.onClick
        },
        shadow: false,
        plotShadow: false,
        scatter: {
          shadow: false
        },
        line: {
          shadow: false
        },
        arearange: {
          shadow: false
        }
      },
      boost: {
        useGPUTranslations: true
      },
      plotOptions: {
        series: {
          animation: false,
          marker: {
            radius: 0
          }
          // enableMouseTracking: false,
        },
        column: {
          animation: false
        },
        scatter: {
          marker: {
            radius: 3
          }
        },
        threshold: null
      },
      title: {
        text: ''
      },
      tooltip: {
        crosshairs: [true, true],
        formatter: function () {
          return 'x:' + this.x.toFixed(3) + '<br/>' + 'y:' + this.y.toFixed(3)
        }
      },
      legend: {
        itemStyle: {
          fontWeight: '400'
        }
      },
      series: this.props.series
    }

    this.chart = Highcharts.chart(this.props.id, chartOptions)
  }

  componentWillUnmount() {
    if (this.chart) {
      this.chart.destroy()
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.series) {
      this.chart.update({
        series: nextProps.series
      })
    }
  }

  render() {
    return pug`
      div(id=this.props.id)
    `
  }
}

export default SingleChart
